<template>
  <section>

    <!--<el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>-->
    <el-drawer
        :append-to-body=true
        title="数据字典明细!"
        :visible.sync="table"
        direction="rtl"
        size="50%">
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filtersDrawer">
          <el-form-item>
            <el-input v-model="filtersDrawer.name" placeholder="明细名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="loadListDataDrawer">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAddDrawer">新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>
        <!--列表展示开始-->
        <el-table :data="listDataDrawer" highlight-current-row v-loading="listLoading" @selection-change="selsChangeDrawer" style="width: 100%;">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column type="index" width="60">
          </el-table-column>
          <el-table-column prop="name" label="明细名" width="150" >
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template scope="scope">
              <el-button size="small" @click="handleEditDrawer(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="handleDelDrawer(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--列表展示结束-->
        <!---->
        <el-col :span="24" class="toolbar">
          <el-pagination layout="total, sizes,prev, pager, next"
                         @current-change="handleCurrentChangeDrawer"
                         @size-change="handleSizeChangeDrawer"
                         :page-sizes="[5, 10, 20, 30]"
                         :page-size="pageSizeDrawer"
                         :total="totalDrawer" style="float:right;">
          </el-pagination>
        </el-col>
        <!---->
    </el-drawer>
    <!--新增界面-->
    <el-dialog :title="titleDrawer" :visible.sync="addFormDrawerVisible" :close-on-click-modal="false">
      <el-form :model="addFormDrawer" label-width="80px" :rules="addFormDrawerRules" ref="addFormDrawer">
        <el-form-item label="明细名" prop="name">
          <el-input v-model="addFormDrawer.name" auto-complete="off"></el-input>
        </el-form-item>
        <!--<el-form-item label="typeid" prop="types_id">
          <el-input v-model="addFormDrawer.types_id" auto-complete="off"></el-input>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormDrawerVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmitDrawer" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
    <!--新增界面结束-->
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="数字据字典名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="loadListData">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>


    <!--列表展示开始-->
    <el-table  @cell-dblclick="cellClick"
        :data="listData" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;" >
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="数据字典名" width="120" >
      </el-table-column>
      <el-table-column prop="sn" label="编号" width="100" >
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--列表展示结束-->
    <!--批量删除-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="total, sizes,prev, pager, next"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     :page-sizes="[5, 10, 20, 30]"
                     :page-size="pageSize"
                     :total="total" style="float:right;">
      </el-pagination>
    </el-col>
    <!---->
    <!--新增界面-->
    <el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="字典名" prop="name">
          <el-input v-model="addForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典编号" >
          <el-input v-model="addForm.sn" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
    <!--新增界面结束-->
  </section>
</template>

<script>

import {addUser, batchRemoveUser, removeUser} from "../../api/api";
import util from "../../common/js/util";

export default {
  data() {
    return {
      table: false,
      systemdictionarydetail:{},
      page:1,//默认是第一页
      pageDrawer:1,//默认是第一页
      pageSize:5,//默认展示十条
      pageSizeDrawer:5,//默认展示十条
      sels: [],//列表选中列,多选选中的id数组
      selsd: [],//列表选中列,多选选中的id数组
      title:'',
      titleDrawer:'',
      addFormVisible: false,//新增界面是否显示
      addFormDrawerVisible: false,//新增界面是否显示
      //新增界面需要展示的数据
      addForm: {

      },
      //新增界面需要展示的数据
      addFormDrawer: {
          id:'',
      },
      //用户必填
      addFormRules: {
        name: [
          { required: true, message: '请输入字典名', trigger: 'blur' }
        ]
      },
      //用户必填
      addFormDrawerRules: {
        name: [
          { required: true, message: '请输入字典名', trigger: 'blur' }
        ]
      },
      filters: {
        name: ''
      },
      filtersDrawer: {
        name: '',
        types_id:''
      },
      listData:[],
      listDataDrawer:[],
      listLoading:false,
      addLoading: false,//加载动画
      total:0,
      totalDrawer:0,
    }
  },


  methods: {

    cellClick(row, column, cell, event){
      this.table = true
      this.filtersDrawer.types_id=row.id
      this.loadListDataDrawer();
    },
    //当点击每页展示条数时
    handleSizeChange(val){
      this.pageSize = val
      this.loadListData()
    },
    //当点击每页展示条数时
    handleSizeChangeDrawer(val){
      this.pageSizeDrawer = val
      this.loadListDataDrawer()
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loadListData();
    },
    handleCurrentChangeDrawer(val) {
      this.pageDrawer = val;
      this.loadListDataDrawer();
    },
    //批量删除
    batchRemove () {
      var ids = this.sels.map(item => item.id);
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.patch("/systemdictionarytype",ids).then(res =>{
          let {success,message} = res.data
          if (success){
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }else {
            this.$message.error('错了哦，这是一条错误消息');
          }
          //刷新数据
          this.loadListData()
        })
      }).catch(() => {

      });
    },
    //新增
    addSubmit () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true;
            this.$http.put("/systemdictionarytype",this.addForm).then(res =>{
              let {success,message} = res.data
              if (success){
                this.listLoading = false;
                //NProgress.done();
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
              }else {
                this.$message('错了哦，这是一条错误消息');
              }
              this.addLoading = false;
              this.addFormVisible = false;
              //刷新数据
              this.loadListData()
            })
          });
        }
      });
    },
    //新增
    addSubmitDrawer () {
      this.$refs.addFormDrawer.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true;
            this.$http.put("/systemdictionarydetail",this.addFormDrawer).then(res =>{
              let {success,message} = res.data
              if (success){
                this.listLoading = false;
                //NProgress.done();
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
              }else {
                this.$message('错了哦，这是一条错误消息');
              }
              this.addLoading = false;
              this.addFormDrawerVisible = false;
              //刷新数据
              this.loadListDataDrawer()
            })
          });
        }
      });
    },
    //显示新增界面
    handleAdd: function () {
      this.title="新增"
      this.addFormVisible = true;
      this.addForm = {
        name: '',
        sn:'',
      };
    },
    //显示新增界面
    handleAddDrawer: function () {
      this.title="新增"
      this.addFormDrawerVisible = true;
      this.addFormDrawer = {
        name: '',
        types_id:this.filtersDrawer.types_id,
      };
      console.debug(this.filtersDrawer.types_id)
    },
    //删除
    handleDel (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/systemdictionarytype"+"/"+row.id).then(res =>{
          let {success,message} = res.data
          if (success){
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }else {
            this.$message.error('错了哦，这是一条错误消息');
          }
          //刷新数据
          this.loadListData()
        })
      }).catch(() => {
      });
    },
    //删除
    handleDelDrawer (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/systemdictionarydetail"+"/"+row.id).then(res =>{
          let {success,message} = res.data
          if (success){
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }else {
            this.$message.error('错了哦，这是一条错误消息');
          }
          //刷新数据
          this.loadListDataDrawer()
        })
      }).catch(() => {
      });
    },
    //显示编辑界面
    handleEdit (index, row) {
      console.debug(2222)
      console.debug(row)
      //回显数据
      this.addForm = Object.assign({}, row);
      //弹出模态框
      this.addFormVisible=true
      //给title定义
      this.title="修改"
    },
    //显示编辑界面
    handleEditDrawer (index, row) {
      //回显数据
      this.addFormDrawer = Object.assign({}, row);
      //弹出模态框
      this.addFormDrawerVisible=true
      //给title定义
      this.titleDrawer="修改"
    },
    selsChange (sels) {
      this.sels = sels;
    },
    selsChangeDrawer (selsd) {
      this.selsd = selsd;
    },
    loadListData(){
      let param = {
        currentPage:this.page,
        pageSize:this.pageSize,
        keywords:this.filters.name
      }
      this.$http.post("/systemdictionarytype",param).then(res =>{
        this.listData=res.data.data;
        this.total=res.data.totals
        this.listLoading=false
      })
    },
    loadListDataDrawer(){
      let param = {
        currentPage:this.pageDrawer,
        pageSize:this.pageSizeDrawer,
        keywords:this.filtersDrawer.name,
        types_id:this.filtersDrawer.types_id,
      }
      this.$http.post("/systemdictionarydetail",param).then(res =>{
        this.listDataDrawer=res.data.data;
        this.totalDrawer=res.data.totals
        this.listLoading=false
      })
    },
    loadDeptTree(){
      this.$http.get("/systemdictionarytype/loadTree").then(res =>{
        console.debug(123456)
        console.debug(res)
        //把查询到的数据给children
        this.systemdictionarydetail=res.data;
      })
    }
  },
  mounted() {
    this.loadListData()
    this.loadListDataDrawer()
  }
}
</script>

<style scoped>

</style>
